<script setup lang="ts">
import { ElRow, ElCol, ElInput, ElButton, ElMessage } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const scriptUrl = defineModel("scriptUrl");
const demoFileUrl = defineModel("demoFileUrl");
const demoConfigType = defineModel("demoConfigType");
const demoConfigMode = defineModel("demoConfigMode");
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "InsertFile",
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const url = ref("http://47.94.91.67/demo_file/demo.docx");
const containerRef = ref();
const cmRef = ref<CmComponentRef>();



let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref("");
onMounted(() => {
  containerWidth = containerRef.value.parentNode.offsetWidth;
  containerHeight = containerRef.value.parentNode.offsetHeight;
  if (containerHeight > 800) {
    containerHeight = 800;
  }
  containerRef.value.style.height = containerHeight + "px";
  setTimeout(() => {
    cmRef.value?.resize("100%", containerHeight);
  }, 1000);
  documentEditorKey.value = getUuid();
});

onUnmounted(() => {
  
});


watch(demoFileUrl, async (newsDemoFileUrl, oldDemoFileUrl) => {});

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  currentConnector = DocEditor.instances.docEditor.createConnector();
    window.connector = currentConnector;
    code.value += "\n\nonDocumentReady\n";
    
  setTimeout(() => {
    
  }, 1000);
};

var config = ref({
  type: "desktop",
  // "type": "mobile",
  documentType: "word",
  historyList: {
    history: [],
    currentVersion: "1",
  },
  document: {
    title: "通用模板.docx",
    // url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
    url: "",
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: "docx",
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: true,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: "theme-light",
    },
    mode: "edit",
    callbackUrl:
      "https://api.docs.onlyoffice.com/dummyCallback",
    lang: "zh-CN",
    user: {
      name: "曹瑞剑雄",
      id: "104",
    },
  },
});

const init = function () {
  
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.document.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
};
init();

let fromLocal = function(){
    currentConnector.callCommand(
    function () {
      Api.asc_insertTextFromFile();
    },
    function () {});
};

let fromUrl = function(){
    if(url.value == undefined || '' == url.value){
        ElMessage.error('请输入文件URL');
        return;
    }
    Asc.scope = {
        url: url.value,
    };
    currentConnector.callCommand(
    function () {
      Api.asc_insertTextFromUrl(Asc.scope.url);
    },
    function () {});
};


</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="9">
        <div style="width: 100%; height: 100%;overflow: scroll;background: #ffffff;">
            <el-row style="margin-top: 15px;margin-bottom: 15px;">
                <el-col :span="24"><div class="grid-content ep-bg-purple-dark" />
                    <el-button type="primary" @click="fromLocal">从文件插入，请先点击文档再点击按钮</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content ep-bg-purple-dark" />
                    <el-button type="primary" @click="fromUrl">从URL插入</el-button>
                    <el-input
                        v-model="url"
                        placeholder="请输入URL"
                        style="width: 440px"
                        @input="changetitle"
                        />
                </el-col>
            </el-row>
        </div>
      </el-col>
      <el-col :span="15">

        <DocumentEditor
          v-if="demoFileUrl && config.document.url"
          id="docEditor"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="config"
          :events_onDocumentReady="onDocumentReady"
          height="700px"
        />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
